<template>
  <div class="list_box">
    <!-- <msg-item-r></msg-item-r>
    <msg-item-l></msg-item-l>
    <msg-item-l></msg-item-l>
    <msg-item-r></msg-item-r>
    <msg-item-r></msg-item-r>
    <msg-item-l></msg-item-l>
    <msg-item-l></msg-item-l>
    <msg-item-r></msg-item-r>
    <msg-item-l></msg-item-l>
    <msg-item-r></msg-item-r>
    <msg-item-r></msg-item-r>
    <msg-item-l></msg-item-l> -->
    <!-- <msg-item-r class="msg_r"></msg-item-r>
    <msg-item-r class="msg_r"></msg-item-r> -->

    <div v-for="(v,i) in msgInfoList"
         :key="i">
      <div v-if="msgInfoList[i].sendId == userId">
        <msg-item-r :toMsg="msgInfoList[i]"></msg-item-r>
      </div>
      <div v-else>
        <msg-item-l :toMsg="msgInfoList[i]"></msg-item-l>
      </div>
    </div>

  </div>
</template>
<script>
// import findMsgById from '../../api/http'
export default {
  name: 'MsgList',
  props: {
    toMsgInfo: {}
  },
  created () {
    console.log(this.toMsgInfo)
    this.getMsgInfoList(this.msgInfo)
  },
  data () {
    return {
      msgInfo: this.toMsgInfo,
      userId: this.toMsgInfo.sendId,
      msgInfoList: []
    }
  },
  methods: {
    async getMsgInfoList (msgInfo) {
      console.log("获取消息")
      const { data: res } = await this.$http.post("/msg/findMsgById", msgInfo)
      this.msgInfoList = res.data
      console.log(res.data)
    }
  }

}
</script>
<style lang="less" scoped>
.list_box {
  width: 100%;
  height: 100%;
  //   background-color: wheat;
  position: relative;
  overflow: auto;
  //   .msg-item-r {
  //     margin-left: 100px;
  //   }
}
</style>